import React, { Component } from 'react'
import { Pagination } from 'antd'
import { CSSTransition } from 'react-transition-group'

import XHeader from '../../components/header'
import XFooter from '../../components/footer'

import Icon_1 from '../../images/conference/icon_1.png'
import Icon_2 from '../../images/conference/icon_2.png'
import Icon_3 from '../../images/conference/icon_3.png'
import Icon_4 from '../../images/conference/icon_4.png'
import Icon_5 from '../../images/conference/icon_5.png'
import Icon_6 from '../../images/conference/icon_6.png'
import Icon_7 from '../../images/conference/icon_7.png'
import Icon_8 from '../../images/conference/icon_8.png'

import Banner_1 from '../../images/conference/banner_1.png'

import './index.scss';

export default class Conference extends Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }
  componentDidMount() {
    
  }
  render() {
    return (
      <section className='page page-conference'>
        <XHeader activeIndex={4}></XHeader>
        <div className='banner'>
          <div className='inner'>
            <div className='left'>
              <CSSTransition
                in
                timeout={1000}
                classNames='fade-banner-h2'
                appear
              >
                <h2>汇集优质协(商)会</h2>
              </CSSTransition>
              <CSSTransition
                in
                timeout={2000}
                classNames='fade-banner-p'
                appear
              >
                <p>助力文创产业发展</p>
              </CSSTransition>
            </div>
            <div className='right'></div>
          </div>
        </div>
        <div className="section section1">
          <div className="inner">
            <div className="top">
              <div className="title">强烈推荐</div>
              <a className="img"><img src={Banner_1} /></a>
            </div>
          </div>
        </div>
        <div className="section section2">
          <div className="inner">
            <div className="bottom">
              <div className="title">热门产业协(商)会</div>
              <ul className='list'>
                <li>
                  <div className='img'><img src={Icon_1} /></div>
                  <h3>上海市旅游行业协会</h3>
                  <p>上海市旅游行业协会于2000年1月进行重组，原上海饭店业协会、上海国际旅行社协会、上海国内旅行社...</p>
                  <div className="btn">我要加入</div>
                </li>
                <li>
                  <div className='img'><img src={Icon_2} /></div>
                  <h3>上海动漫行业协会</h3>
                  <p>上海市动漫行业协会（缩写SHACA）是上海市文广局主管的市级动漫行业组织，成立于2012年9月，会长单位是上海炫动传播有限公司。</p>
                  <div className="btn">我要加入</div>
                </li>
                <li>
                  <div className='img'><img src={Icon_3} /></div>
                  <h3>上海摄影业行业协会</h3>
                  <p>1989年，上海摄影业行业协会成立。1994年，全市有照相馆948家，从业人员7318人，其中市区饮服系统146家，个体经营者488家，其它...</p>
                  <div className="btn">我要加入</div>
                </li>
                <li>
                  <div className='img'><img src={Icon_4} /></div>
                  <h3>上海市演出行业协会</h3>
                  <p>上海市演出行业协会是由上海市演出行业经营单位（含文艺表演团体、演出经纪机构、演出场所）自愿组成，实行行业服务和自律管理的跨部...</p>
                  <div className="btn">我要加入</div>
                </li>
                <li>
                  <div className='img'><img src={Icon_5} /></div>
                  <h3>上海数字印刷行业协会</h3>
                  <p>上海市模具技术协会简称上海市模协，是依法登记的非营利性社会团体法人创建于1970年，是全国成立最早的地方模具协会，也是我国规模最大...</p>
                  <div className="btn">我要加入</div>
                </li>
                <li>
                  <div className='img'><img src={Icon_6} /></div>
                  <h3>上海市创意制作行业协会</h3>
                  <p>上海市创意制作行业协会成立于2014年7月10日，经由上海市经济和信息化委员会和上海市民政局批准，并在上海市社会团体管理局登记的...</p>
                  <div className="btn">我要加入</div>
                </li>
                <li>
                  <div className='img'><img src={Icon_7} /></div>
                  <h3>上海市文化娱乐行业协会</h3>
                  <p>上海市文化娱乐行业协会成立于1996年11月，原名为“上海市文化娱乐业协会”，2004年10月协会换届后，改名为“上海市文化娱乐行业协...</p>
                  <div className="btn">我要加入</div>
                </li>
                <li>
                  <div className='img'><img src={Icon_8} /></div>
                  <h3>上海宝玉石行业协会</h3>
                  <p>上海市宝协成立于1996年5月，首任会长刘振元，现为协会名誉会长。2006年8月，上海市宝玉石协会和上海珠宝玉石加工行业协会合并...</p>
                  <div className="btn">我要加入</div>
                </li>
              </ul>
            </div>
            <div className='pagination'>
              <Pagination showQuickJumper defaultCurrent={2} total={500} />
            </div>
          </div>
        </div>
        <XFooter></XFooter>
      </section>
    )
  }
}